<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">账单明细</block>
		</cu-custom>

		<view class="padding">
			<view class="navList bg-white radius-xl padding-xs">
				<u-sticky bgColor="#fff">
					<u-tabs :list="navList" @click="navClick" keyName="name" :scrollable="false"
						lineColor="var(--theme-color)" :activeStyle="{ color: 'var(--theme-color)', fontWeight: 'bold' }">
					</u-tabs>
				</u-sticky>
			</view>
		</view>

		<!-- 记录列表 -->
		<view class="list padding padding-top-0">
			<view class="bg-white radius-xl padding-sm" v-if="list.length > 0">
				<view class="item padding-tb" v-for="(item, index) in list" :key="item.id">
					<view class="status-icon">
						<text class="text-green cuIcon-roundcheckfill" v-if="item.action == 'increase'"></text>
						<text class="text-green cuIcon-formfill" v-else></text>
					</view>
					<view class="content margin-left">
						<view class="grid col-2 text-bold">
							<view class="status-text text-green">
								{{ item.remarks }}
							</view>
							<view class="text-right text-red">￥{{ item.money }}</view>
						</view>
						<view class="text-sm text-gray desc-content">
							<view class="order-no"> {{ item.create_time }} </view>
						</view>
					</view>
				</view>
			</view>
			<emptyData v-else type="notLog" top="10" text="暂无余额记录"></emptyData>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			search: {
				page: 1,
				action: 'increase',
			},
			navList: [
				{ name: '充值', scene: 'increase' },
				{ name: '消费', scene: 'decrease' },
			],
			list: []
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		this.search.page++;
		this.getList();
	},
	methods: {
		getList() {
			this.$utils.$api.Wallet.log(this.search).then(data => {
				this.list = [...this.list, ...data.data];
			}).catch(() => { })
		},
		navClick(e) {
			this.search.action = e.scene;
			this.search.page = 1;
			this.list = [];
			this.getList();
		}
	}
}
</script>

<style lang="less" scoped>
.list {
	.item:nth-of-type(n+2) {
		border-top: solid 1upx #f5f5f5;
	}

	.item {
		display: flex;
		align-items: center;

		.status-icon {
			text {
				font-size: 50upx;
			}
		}

		.content {
			flex: 1;

			.status-text {
				font-size: 30upx;
			}

			.desc-content {
				padding-top: 12upx;
				line-height: 35upx;
			}
		}
	}
}
</style>
